<template>
  <nut-uploader
    ref="uploaderRef"
    v-model:file-list="text"
    :autoUpload="autoUpload"
    :name="name"
    :url="url"
    :fileList="fileList"
    :isPreview="isPreview"
    :isDeletable="isDeletable"
    :method="method"
    :listType="listType"
    :capture="capture"
    :maximize="maximize"
    :maximum="maximum"
    :clearInput="clearInput"
    :accept="accept"
    :headers="headers"
    :data="data"
    :xhrState="xhrState"
    :withCredentials="withCredentials"
    :multiple="multiple"
    :disabled="disabled"
    :timeout="timeout"
    :beforeUpload="beforeUpload"
    :beforeXhrUpload="beforeXhrUpload"
    :beforeDelete="beforeDelete"
    v-on="onEvents"
  ></nut-uploader>
</template>

<script setup>
import { commonProps, useCommonProps } from '@/supreme/core/props';
import { useEvents } from '@/supreme/core';
import { useVModel } from '@vueuse/core';
defineOptions({
  name: 'SuUploader'
});
const props = defineProps({
  ...commonProps,
  modelValue: {
    type: Array,
    default: () => []
  },
  autoUpload: {
    type: Boolean,
    default: true
  },
  name: {
    type: String,
    default: 'file'
  },
  url: {
    type: String,
    required: true
  },
  fileList: {
    type: Array,
    default: () => []
  },
  isPreview: {
    type: Boolean,
    default: true
  },
  isDeletable: {
    type: Boolean,
    default: true
  },
  method: {
    type: String,
    default: 'post'
  },
  listType: {
    type: String,
    default: 'picture'
  },
  capture: {
    type: String,
    default: ''
  },
  maximize: {
    type: [Number, String],
    default: Number.MAX_VALUE
  },
  maximum: {
    type: [Number, String],
    default: 1
  },
  clearInput: {
    type: Boolean,
    default: true
  },
  accept: {
    type: String,
    default: '*'
  },
  headers: {
    type: Object,
    default: () => ({})
  },
  data: {
    type: Object,
    default: () => ({})
  },
  xhrState: {
    type: Number,
    default: 200
  },
  withCredentials: {
    type: Boolean,
    default: false
  },
  multiple: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  timeout: {
    type: [Number, String],
    default: 1000 * 30
  },
  beforeUpload: Function,
  beforeXhrUpload: Function,
  beforeDelete: Function,
  start: Function,
  progress: Function,
  oversize: Function,
  success: Function,
  failure: Function,
  change: Function,
  delete: Function,
  fileItemClick: Function
});

const emit = defineEmits([
  'update:modelValue',
  'start',
  'progress',
  'oversize',
  'success',
  'failure',
  'change',
  'delete',
  'file-item-click'
]);
const text = useVModel(props, 'modelValue', emit);
const formSafe = inject('formSafe');
const uploaderRef = ref();
const onEvents = computed(() => {
  const events = [
    'start',
    'progress',
    'oversize',
    'success',
    'failure',
    'change',
    'delete',
    'file-item-click'
  ];
  return useEvents({ props, events, emit, form: formSafe?.form });
});
</script>

<style lang="scss" scoped></style>
